/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

/* You can add global styles to this file, and also import other style files */
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

/* 颜色配置 */
.color-ion-primary {
	/** ion-primary */
	color: var(--ion-color-primary);
}

.color-ion-secondary {
	/** ion-secondary */
	color: var(--ion-color-secondary);
}

.color-ion-tertiary {
	/** ion-tertiary */
	color: var(--ion-color-tertiary);
}

.color-ion-success {
	/** ion-success */
	color: var(--ion-color-success);
}

.color-ion-warning {
	/** ion-warning */
	color: var(--ion-color-warning);
}

.color-ion-danger {
	/** ion-danger */
	color: var(--ion-color-danger);
}

.color-ion-dark {
	/** ion-dark */
	color: var(--ion-color-dark);
}

.color-ion-medium {
	/** ion-medium */
	color: var(--ion-color-medium);
}

.color-ion-light {
	/** ion-light */
	color: var(--ion-color-light);
}

.color-red {
	/** Dust Red / 薄暮 - 斗志、奔放 */
	color: var(--antd-dust-red);
}

.color-volcano {
	/** Volcano / 火山 - 醒目、澎湃 */
	color: var(--antd-volcano);
}

.color-orange {
	/** Sunset Orange / 日暮 - 温暖、欢快 */
	color: var(--antd-sunset-orange);
}

.color-gold {
	/** Calendula Gold / 金盏花 - 活力、积极 */
	color: var(--antd-calendula-gold);
}

.color-yellow {
	/** Sunrise Yellow / 日出 - 出生、阳光 */
	color: var(--antd-sunrise-yellow);
}

.color-lime {
	/** Lime / 青柠 - 自然、生机 */
	color: var(--antd-lime);
}

.color-green {
	/** Polar Green / 极光绿 - 健康、创新 */
	color: var(--antd-polar-green);
}

.color-cyan {
	/** Cyan / 明青 - 希望、坚强 */
	color: var(--antd-cyan);
}

.color-blue {
	/** Daybreak Blue / 拂晓蓝 - 包容、科技、普惠 */
	color: var(--antd-daybreak-blue);
}

.color-darkblue {
	/** Geek Blue / 极客蓝 - 探索、钻研 */
	color: var(--antd-geek-blue);
}

.color-purple {
	/** Golden Purple / 酱紫 - 优雅、浪漫 */
	color: var(--antd-golden-purple);
}

.color-magenta {
	/** Magenta / 法式洋红 - 明快、感性 */
	color: var(--antd-magenta);
}

.color-gray-6 {
	/** Gray / 灰 */
	color: #bfbfbf;
}

.color-gray-7 {
	/** Gray / 灰 */
	color: #8c8c8c;
}

.color-angular {
	/** Angular - 红 */
	color: rgb(221, 0, 49);
}

.color-vue {
	/** Vue - 绿 */
	color: rgb(65, 184, 131);
}

.color-react {
	/** React - 蓝 */
	color: rgb(97, 218, 251);
}

.color-qq-music {
	/** QQ音乐 - 绿 */
	color: rgb(49, 194, 124);
}

.color-wechat {
	/** 微信 - 绿 */
	color: rgb(7, 193, 96);
}

.color-chromium {
	/** Chromium - 蓝 */
	color: rgb(70, 136, 244);
}

.color-link {
	/** 提示 - 蓝 */
	color: #1890ff;
}

.color-success {
	/** 成功 - 绿 */
	color: #52c41a;
}

.color-warning {
	/** 警告 - 金 */
	color: #faad14;
}

.color-error {
	/** 错误 - 红 */
	color: #ff4d4f;
}


table {
	width: 100%;
	// 当我们给table td添加border属性后，会发现单元格之间的边框会发生重叠，从而使边框线变粗，这时候可以通过CSS属性中的collapse进行合并。
	border-collapse: collapse;

	tr {

		th {
			padding: 4px;
			text-align: center;
			background: rgba(var(--ion-color-dark-rgb), 0.175);
		}

		td {
			padding: 4px;
		}
	}
}
